import { createApp } from 'vue'
import App from './App.vue'
import Cookies from 'js-cookie'
import store from '@/store'
import i18n from '@/lang'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
import '@/icons'
import ElementPlus from 'element-plus'
import VueParticles from 'vue-particles'
import 'element-plus/lib/theme-chalk/index.css'
import '@/assets/tailwindcss/index.css'
import '@/style/index.scss'
import router from '@/router'
import './permission'

const app = createApp(App)

// 自动注册components下的组件
const requireComponent = require.context('./components', true, /[A-Z,a-z]\w+\.(vue|js)$/)

requireComponent.keys().forEach(fileName => {
  const fileNameArr = fileName.split('/')
  const fileNameLength = fileNameArr.length
  const fileNameStr = fileNameArr.pop().replace(/\.\w+$/, '')
  if (fileNameLength > 2 && fileNameStr !== 'index') {
    return
  }
  // 获取组件配置
  const componentConfig = requireComponent(fileName)
  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名  规则  入过文件夹下存在index文件  则以文件夹名称为组件名称  单独vue文件则以文件名称为组件名
      fileName.split('/')[1].replace(/\.\w+$/, '')
    )
  )
  // 全局注册组件
  app.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

app.use(store).use(router).use(VueParticles)
  .use(ElementPlus, { size: Cookies.get('size') || 'medium', i18n: i18n.global.t }).use(i18n).mount('#app')
